<template>
  <!-- Banner -->
  <Banner :data="form" />

  <!-- 容器 -->
  <div class="container md:w-screen-xl m-auto" v-if="form">
    <div class="flex flex-col">
      <Breadcrumb :data="form" />
      <div :class="form.design?.styles" class="page-main w-full bg-white rounded-lg">
        <div class="p-4 leading-7" v-html="form.design?.content">
        </div>
      </div>
    </div>
  </div>
  <div v-if="!form">
    <el-empty description="404 页面不存在"></el-empty>
  </div>
</template>
<script setup lang="ts">
import type {ApiResult} from "~/api";
import {useServerRequest} from "~/composables/useServerRequest";
import {useConfigInfo, useForm, useToken} from "~/composables/configState";
import Breadcrumb from "~/components/Breadcrumb.vue";
import type {BreadcrumbItem} from "~/types/global";
import type {Navigation} from "~/api/cms/navigation/model";

// 引入状态管理
const route = useRoute();
const config = useConfigInfo();
const token = useToken();
const form = useForm();
const breadcrumb = ref<BreadcrumbItem>();

// 请求数据
const reload = async () => {
  const { data: nav } = await useServerRequest<ApiResult<Navigation>>('/cms/navigation/' + form.value.navigationId)
  if (nav.value?.data) {
    form.value = nav.value.data
    // seo
    useHead({
      title: `${form.value.title} - ${config.value.siteName}`,
      meta: [{ name: form.value.design?.keywords, content: form.value.design?.description }],
      bodyAttrs: {
        class: "page-container",
      },
      script: [
        {
          children: "console.log('Hello World====')",
        },
      ],
    });
    // 面包屑
    breadcrumb.value = form.value
  }
}

watch(
    () => route.query.spm,
    (spm) => {
      console.log(spm,'spm>>')
      // TODO 方案一：从spm参数提取商品ID
      const spmValue = String(spm).split('.')
      if(spmValue[5]){
        form.value.navigationId = Number(spmValue[5])
      }

      // TODO 方案二(优先级更高)：从params获取商品ID
      console.log(route.params.id,'sdfsd');
      // const str = String(custom).replaceAll(".html", "");
      // const split = str.split('-');
      // if(split[1]){
      //   console.log('方案二：从params获取ID=' + split[1])
      //   form.value.navigationId = Number(split[1])
      // }

      reload();
    },
    { immediate: true }
);
</script>
